<template>
	<view class="container" style="background-image: url('/static/zzm/hxjlbjt.png')">
		<view class="withdrawal">
			<!-- 账户余额展示 -->
			<view class="balance-item">
				<label>账户余额</label>
				<span class="balance-amount">￥{{ accountBalance }}</span>
			</view>
			<!-- 提现金额输入 -->
			<view class="form-item">
				<label>提现金额</label>
				<input v-model="withdrawAmount"  />元
			</view>
			<!-- 真实姓名输入 -->
			<view class="form-item">
				<label>真实姓名</label>
				<input v-model="realName" />
			</view>
			<!-- 银行选择 -->
			<view class="form-item">
				<label>请选择银行</label>
				<picker @change="bindPickerChange" :value="selectedBank" :range="banks">
					<view >{{ banks[selectedBank] }}</view>
				</picker>
			</view>
			<!-- 银行卡号输入 -->
			<view class="form-item">
				<label>请输入银行卡号</label>
				<input v-model="bankCardNumber" />
			</view>
			<!-- 提交按钮 -->
			<button class="submit-btn" type="primary" @click="submitForm">确认信息并提交</button>
		</view>
<view class="details">
			<!-- 提现记录标题 -->
			<view class="title">提现记录</view>
			<view class="card" v-for="(item, index) in withdrawalRecords" :key="index">
				<view class="details_left">
					<span>商家提现申请</span>
					<span class="time">核销时间：{{ item.time }}</span>
				</view>
				<view class="details_right">
					<span class="details_money">+&nbsp;{{item.money}}</span>
					<view class="record-status"> {{ item.status }}</view>
				</view>
			
			</view>
		</view>
		
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
// 模拟账户余额
const accountBalance = ref(1500);
// 提现金额
const withdrawAmount = ref('');
// 真实姓名
const realName = ref('');
// 选择的银行
const selectedBank = ref(0);
// 银行卡号
const bankCardNumber = ref('');
// 银行列表模拟数据
const banks = ref(['工商银行', '农业银行', '中国银行', '建设银行']);
// 提现记录数据
const withdrawalRecords = ref([{
	time:'2025-25-25 22:22',
	money:26,
	status:'审核通过'
},{
	time:'2025-25-25 22:22',
	money:26,
	status:'审核通过'
},{
	time:'2025-25-25 22:22',
	money:26,
	status:'审核通过'
},{
	time:'2025-25-25 22:22',
	money:26,
	status:'审核通过'
},{
	time:'2025-25-25 22:22',
	money:26,
	status:'审核通过'
}]);

// 模拟从后端获取提现记录数据
const fetchRecords = async () => {
	try {
		const res = await uni.request({
			url: 'https://example.com/api/getWithdrawalRecords', // 请替换为实际后端接口
			method: 'GET'
		});
		if (res.statusCode === 200) {
			withdrawalRecords.value = res.data;
		}
	} catch (error) {
		console.error('获取提现记录失败', error);
	}
};

// 提交表单方法
const submitForm = () => {
	// 简单数据校验
	// if (!withdrawAmount.value || !realName.value || !selectedBank.value || !bankCardNumber.value) {
	// 	uni.showToast({
	// 		title: '请填写完整信息',
	// 		icon: 'none'
	// 	});
	// 	return;
	
	// }
	// // 这里可以进一步添加提现逻辑，比如调用后端提现接口
	// console.log('提现金额:', withdrawAmount.value);
	// console.log('真实姓名:', realName.value);
	// console.log('选择银行:', selectedBank.value);
	// console.log('银行卡号:', bankCardNumber.value);
	// uni.showToast({
	// 	title: '提交成功',
	// 	icon: 'success'
	// });
	uni.navigateTo({
		url:'/pages/withdrawalSuccessful/withdrawalSuccessful'
	})
};

onMounted(() => {
	fetchRecords();
});
</script>

<style lang="scss" scoped>
.container {
	width: 100vw;
	height: 100vh;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	.withdrawal {
		background-color: white;
		border-radius: 40rpx;
		width: 80%;
	
		display: flex;
		flex-direction: column;
		align-items: start;
		padding: 5% 5%;
	}
}
.balance-item {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}
.balance-amount {
	color: #f60;
	font-size: 18px;
	
}
.form-item {
	height: 20%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}
.form-item label {
	display: block;
	margin-bottom: 5px;
}
.form-item input {
	border: 2rpx solid #66666650;
	border-radius: 40rpx;
	width: 50%;
}
.submit-btn {
	margin-bottom: 15px;
	height: 30%;
}
.details {
	width: 80%;
	height: 70%;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 5%;
	border-radius: 50rpx;
	overflow: auto;
	margin-top: 3%;
	.title {
		margin-top: 5%;
		margin-right: auto;
		font-size: 40rpx;
	}
	.card {
		border-top: 8rpx solid #ababab50;
		width: 100%;
		height: 15%;
		display: flex;
	justify-content: space-between;
	align-items: center;

	.details_left{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		font-size: 30rpx;
		padding: 5% 0;
		
		.time{
			margin-top: 4%;
			font-size: 25rpx;
			opacity: 0.5;
		}
	}
	.details_right{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		font-size: 30rpx;
		padding: 5% 0;
		.details_money{
			font-size: 30rpx;
			font-weight: 400;
			color: red;
		}
		.record-status{
			margin-top: 4%;
			font-size: 25rpx;
			opacity: 0.5;
		}
		
	}
	
		
		
	}
}
</style>
